<template>
    <ul class="bottom-nav">
        <li @click="getShow(1)"><i class="iconfont iconjingqu1"></i>景区概况</li>
        <li @click="getShow(2)"><i class="iconfont iconluxian"></i>游览路线</li>
        <li @click="getShow(3)"><i class="iconfont iconjingqu"></i>更多景区</li>
    </ul>
</template>

<script>
export default {
    name: 'BottomNav',
    data () {
        return {
            
        }
    },
    methods:{
        getShow(num) {
            this.$emit('changeShow',num)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.bottom-nav {
    position: absolute; bottom:0; width:100%; overflow: hidden; background: #fff; 
    li { 
        float: left; width: 33%; text-align: center;  height: 44px; text-align: center; line-height: 44px; color: #000; 
        i {margin-right: 5px;}
    }
}
</style>
